/***
Timeline 2
***/

.mt-timeline-2 {
	position: relative;

	> .mt-timeline-line {
		position: absolute;
		z-index: 1;
		height: 100%;
		width: 1px;
		top: 0;
		left: 50%;
		border-left: 4px solid;
		transform: translateX(-2px);
	}

	> .mt-container {
		position: relative;
		padding: 0;

		> .mt-item {
			list-style: none;
			padding-bottom: 60px;
			clear: both;

			.timeline-body-img.pull-left {
				margin-right: 15px;
			}

			> .mt-timeline-icon {
				width: 70px;
				height: 70px;
				background-color: #ccc;
				border-radius: 50% !important;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				z-index: 5;
				border: 0;
				overflow: hidden;

				> i {
					top: 50%;
					left: 50%;
					transform: translateY(-50%) translateX(-50%);
					font-size: 24px;
				}

				> img {
					width: 100%;
					height: auto;
				}
			}

			> .mt-timeline-content {
				width: 50%;
				display: inline-block;
				position: relative;

				> .mt-content-container {
					text-align: left;
					background-color: #f5f6fa;
					padding: 30px;
					border: 2px solid;
					border-color: darken(#f5f6fa, 10%);
					@include clearfix();

					.mt-author,
					.mt-title {
						width: 50%;
						margin-bottom: 15px;
					}

					.mt-content-title {
						@include opacity(0.8);
						margin-top: 10px;
						font-size: 18px;
						font-weight: 600;
					}

					.mt-avatar {
						width: 40px;
						height: 40px;
						border-radius: 50% !important;
						overflow: hidden;

						> img {
							width: 100%;
							height: auto;
						}
					}

					.mt-author-name,
					.mt-author-name a {
						@include opacity(0.9);
						font-size: 15px;
						font-weight: 600;
						text-decoration: none;
					}

					.mt-author-notes {
						font-size: 12px;
					}

					.mt-content {
						padding-top: 15px;
						border-top: 1px solid;
						clear: both;
						line-height: 1.7em;

						> p {
							@include opacity(0.7);
						}

						a, button {
							font-size: 14px;
						}
					}

					.btn {
						display: inline-block;
						margin: 0 5px 10px 0;
					}

					.btn.pull-right {
						margin: 0 0 10px 5px;
					}

					&:before {
						content: '';
						position: absolute;
						top: 28px;
						height: 0;
						width: 0;
						border: 10px solid transparent;
					}
				}
			}

			&:nth-child(odd) { // LEFT ALIGN
				text-align: left;
				> .mt-timeline-content {
					> .mt-content-container {
						margin-right: 60px;

						.mt-title {
							float: left;
						}

						.mt-author {
							float: right;
						}

						.mt-avatar {
							float: right;
							margin-left: 15px;
						}

						.mt-author-name,
						.mt-author-notes {
							text-align: right;
						}

						&:before {
							right: 40px;
							border-left: 10px solid darken(#f5f6fa, 10%);
						}
					}
				}
			}

			&:nth-child(even) { // RIGHT ALIGN
				text-align: right;

				> .mt-timeline-icon {
					> i {
						transform: translateY(-50%) translateX(50%);
						left: -50%;
					}
				}

				> .mt-timeline-content {
					> .mt-content-container {
						margin-left: 60px;

						.mt-avatar {
							float: left;
							margin-right: 15px;
						}

						.mt-title {
							float: right;
							text-align: right;
						}

						.mt-author {
							float: left;
						}

						.mt-author-name,
						.mt-author-notes {
							text-align: left;
						}

						&:before {
							left: 40px;
							border-right: 10px solid #E9EDEF;
						}
					}
				}

			}

		}
	}

}

// Responsive

@media (max-width: $screen-sm-max) { /* 991px */

	.mt-timeline-2 {
		> .mt-timeline-line {
			left: 25px;
		}

		> .mt-container {

			> .mt-item {

				> .mt-timeline-icon {
					left: 25px;

					> i {
						left: 0;
					}
				}
				> .mt-timeline-content {
					width: 100%;

					> .mt-content-container {

						.mt-title {
							float: none;
							text-align: left !important;
						}

						.mt-author,
						.mt-title {
							width: 100%;
						}
					}

				}

				&:nth-child(odd) {
					text-align: right;
					> .mt-timeline-content {
						> .mt-content-container {
							margin-left: 80px;
							margin-right: 0;

							.mt-avatar {
								float: left;
								margin-right: 15px;
							}

							.mt-title {
								float: right;
								text-align: right;
							}

							.mt-author {
								float: left;
							}

							.mt-author-name,
							.mt-author-notes {
								text-align: left;
							}

							&:before {
								left: 70px;
								border-right: 10px solid #E9EDEF;
								border-left: none;
							}
						}
					}
				}

				&:nth-child(even) {
					> .mt-timeline-content {
						> .mt-content-container {
							margin-left: 80px;
							margin-right: 0;

							&:before {
								left: 70px;
								border-right: 10px solid #E9EDEF;
								border-left: none;
							}
						}
					}
				}

			}
		}

	}

}

@media (max-width: $screen-xs-min) {
	.mt-timeline-2 {
		.btn.pull-right,
		.btn-group.pull-right {
			float: none !important;
			margin: 0 5px 10px 0 !important;
		}
	}
}

@media (max-width: 400px) {
	.mt-timeline-2 > .mt-container > .mt-item:nth-child(even) > .mt-timeline-content > .mt-content-container .mt-author-notes {
		clear: both;
		padding-top: 10px;
	}
}